<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Work</title>
    <link rel="stylesheet" href="./node_modules/layui/dist/css/layui.css">
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/layui/dist/layui.js"></script>
    <script>
        $(function () {
            $('form').submit(function (e) {
                e.preventDefault();
                $.ajax({
                    url: 'http://localhost:5000/api/register',
                    type: 'POST',
                    data: JSON.stringify({
                        username: $('#username').val(),
                        password: $('#password').val()
                    }),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 200) {
                            alert(data.msg);
                        } else {
                            alert(data.msg);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(xhr, status, error);
                    }
                });
            });

            $('#return').click(function () {
                window.location.href = './login.html';
            });
        });
    </script>
</head>

<body>
    <form>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
        </div>
        <div>
            <button type="submit">Register</button>
        </div>
    </form>
    <button id="return">Return</button>
</body>

</html>